import QtQuick 2.0

Rectangle{
    id: progressButton
    implicitWidth: 120
    implicitHeight: 48

    property int btnHeight: width
    property int btnWidth: height
    property real progress: 0
    property bool runing: false

    border.color: "#f0f0f0"
    border.width: 2
    radius: 0

    signal sClicked()

    Text{
        id: progressText
        anchors.centerIn: parent
        font.family: "microsoft yahei"
        font.pixelSize: 14
        text: qsTr("开始")
    }

    Timer{
        id: completeDelayView
        running: false
        repeat: false
        interval: 500
        onTriggered:{
            progressCanvas.onAnimationStop();
            rAniStop.start();
            widthAniStop.start();
        }
    }

    MouseArea{
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        onClicked: {
            if (parent.runing) return
            btnHeight = progressButton.height
            btnWidth = progressButton.width
            progressText.visible = false;
            rAniStart.start();
            widthAniStart.start();
            parent.runing = true;
        }
    }
    PropertyAnimation{
        id: rAniStart
        target: progressButton
        property: "radius"
        from: 0
        to: progressButton.height/2
        onStopped: {
            emit: sClicked()
            progressCanvas.onAnimationStart();
        }
    }
    PropertyAnimation{
        id: widthAniStart
        target: progressButton
        property: "width"
        from: progressButton.width
        to: progressButton.height
    }
    PropertyAnimation{
        id: rAniStop
        target: progressButton
        property: "radius"
        from: progressButton.btnHeight/2
        to: 0
        onStopped: {
            progressText.text = qsTr("完成");
            progressText.visible = true;
            progressButton.runing = false;
        }
    }
    PropertyAnimation{
        id: widthAniStop
        target: progressButton
        property: "width"
        from: progressButton.width
        to: progressButton.btnWidth
    }

    onProgressChanged: {
        if(progress > 100) progress = 100;
        progressCanvas.circleValue = progress * 3.6;
        progressCanvas.requestPaint();
        if(progress >= 100) completeDelayView.running = true;
    }

    Canvas {
        id: progressCanvas
        property color arcColor: "#148014"
        property color arcBackgroundColor: "#f0f0f0"
        property int arcWidth: 2
        property real radius: progressButton.height / 2
        property bool anticlockwise: false
        property real circleValue: 0

        width: 2*radius + arcWidth
        height: 2*radius + arcWidth
        anchors.centerIn: parent

        visible: false

        Text{
            anchors.centerIn: parent
            font.pointSize: 15
            text: Math.floor((parent.circleValue / 360) * 100 )+ "%"
        }

        function onAnimationStart(){
            circleValue = 0;
            var ctx = getContext("2d");
            ctx.clearRect(0,0,width,height);
            visible = true;
        }

        function onAnimationStop(){
            visible = false;
        }

        onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0,0,width,height)
            ctx.beginPath()
            ctx.strokeStyle = arcBackgroundColor
            ctx.lineWidth = arcWidth
            ctx.arc(width/2,height/2,radius,0,Math.PI*2,anticlockwise)
            ctx.stroke()

            var r = circleValue * Math.PI/180
            ctx.beginPath()
            ctx.strokeStyle = arcColor
            ctx.lineWidth = arcWidth

            ctx.arc(width/2,height/2,radius,0-90*Math.PI/180,r-90*Math.PI/180,anticlockwise)
            ctx.stroke()
        }
    }
}
